<template>
    <section>
    <el-form ref="chargeform" label-width="80px" v-loading="loading" style="margin:60px;width:85%;min-width:600px;">
        <el-row>
            <el-col :span="6">
                <el-form-item label="用户编号" prop="f_userid">
                    <el-input type="text" v-model="chargeform.f_userid" placeholder="请输入用户编号并回车" @keyup.enter.native="doGetUserInfo"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="用户姓名"  prop="f_username">
                    <el-input type="text"  v-model="chargeform.f_username" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="用户地址">
                    <el-input type="text"  v-model="chargeform.f_useraddress" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="联系电话">
                    <el-input type="text"  v-model="chargeform.f_userphone" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <el-form-item label="价格类型">
                    <el-input type="text"  v-model="chargeform.f_stairpricename" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="设备编号">
                    <el-input type="text"  v-model="chargeform.f_usermachineid" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="充值金额">
                    <el-input type="text" v-model="chargeform.f_chargemoney" ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="操作员">
                    <el-input type="text" v-model="chargeform.f_operator" ></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-form-item>
                <el-button type="primary"  @click.native.prevent="handleCharge" >充值</el-button>
                <el-button @click.native.prevent="handleReset2" >重置</el-button>
            </el-form-item>
        </el-row>
    </el-form>
    <template>
        	<el-table :data="users" highlight-current-row v-loading="loading" style="width: 100%;">
				<el-table-column type="index" width="60">
				</el-table-column>
				<el-table-column prop="f_userid" label="编号" width="120" sortable>
				</el-table-column>
				<el-table-column prop="f_username" label="姓名" width="100"  sortable>
				</el-table-column>
				<el-table-column prop="f_useraddress" label="地址" width="100" sortable>
				</el-table-column>
				<el-table-column prop="f_userphone" label="电话" width="120" sortable>
				</el-table-column>
				<el-table-column prop="f_usermachineid" label="设备号" min-width="180" sortable>
				</el-table-column>
                <el-table-column prop="f_chargestate" label="充值状态" min-width="180" sortable></el-table-column>
                <el-table-column prop="f_pricetype" label="价格类型" min-width="180" sortable></el-table-column>
                <el-table-column prop="f_chargedate" label="充值日期" min-width="180" sortable></el-table-column>
                <el-table-column prop="f_operator" label="操作员" min-width="180" sortable></el-table-column>
			</el-table>
    </template>
    </section>
</template>

<script>
import { getUserInfo , doCharge  ,getChargeList } from '../../api/api';
export default {
    data(){
        return {
            loading : false,
            chargeform: {
                f_userid: '',
                f_username: '',
                f_useraddress: '',
                f_userphone: '',
                f_stairpricename: '',
                f_usermachineid: '',
                f_operator: '',
                f_chargemoney: '50'
            },
            users: []
        }
    },
    methods:{
        handleReset2() {
            //清空界面
             this.chargeform.f_username = '' ;
             this.chargeform.f_useraddress = '' ;
             this.chargeform.f_userphone =  '' ;
             this.chargeform.f_pricetype = '' ;
             this.chargeform.f_usermachineid =  '' ;
        },
        doGetUserInfo(){
            //重新查找时清空界面
            this.handleReset2();
            this.loading = true;
            var useridParams ={
                f_userid : this.chargeform.f_userid
            };
            getUserInfo(useridParams).then(data =>{
                if(data.data!=='getuserinfofail'){
                    this.loading=false;
                     this.$message({
                         message: "查找"+this.chargeform.f_userid+"成功",
                         type: 'success'
                     });
                    //界面赋值
                    this.doGetChargeList();
                    this.chargeform.f_username =  data.data[0].f_username;
                    this.chargeform.f_useraddress =  data.data[0].f_useraddress;
                    this.chargeform.f_userphone =  data.data[0].f_userphone;
                    this.chargeform.f_stairpricename =  data.data[0].f_stairpricename;
                    this.chargeform.f_usermachineid =  data.data[0].f_usermachineid;
                  }else{
                    this.$message({
                         message: "查找"+this.chargeform.f_userid+"失败",
                         type: 'error'
                     });
                    this.loading=false;
                  }

            });
        },
        doGetChargeList(){
            let para = {
          f_username: '',
          f_userid: this.chargeform.f_userid
        };
        console.log(para);
				this.loading = true;
				//NProgress.start();
				getChargeList(para).then((res) => {
          console.log(res);
					this.users = res.data;
					this.loading = false;
				//	NProgress.done();
				});
        },
        handleCharge(){
            this.loading=true;
            //将界面信息传回后台产生收费记录
            var chargeparams = {
                f_userid : this.chargeform.f_userid,
                f_username : this.chargeform.f_username,
                f_useraddress : this.chargeform.f_useraddress,
                f_userphone : this.chargeform.f_userphone,
                f_chargemoney : this.chargeform.f_chargemoney,
                f_usermachineid : this.chargeform.f_usermachineid,
                f_pricetype : this.chargeform.f_stairpricename,
                f_operator : this.chargeform.f_operator
            };
            doCharge(chargeparams).then(data =>{
                
                if(data.data ==="chargesuccess"){
                     this.loading=false;
                    this.$message({
                         message: "充值"+this.chargeform.f_userid+"成功",
                         type: 'success'
                    });
                    this.handleReset2();
                    this.chargeform.f_userid = '' ;
                }else{
                        this.loading=false;
                    this.$message({
                         message: "充值"+this.chargeform.f_userid+"失败",
                         type: 'error'
                    });
                }
            });
        }

    },
    mounted(){
        var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.chargeform.f_operator = user.name || '';
			  }
    }
}
</script>

<style>

</style>
